<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态列表 - Vue.js</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #000;
            color: #fff;
        }

        #app {
            width: 40%;
            margin: 20px auto;
        }

        #fruits > li {
            width: 90%;
            height: 50px;
            background-color: #6ca;
            margin: 4px 0;
            text-align: center;
            font-size: 20px;
            list-style-type: none;
            line-height: 50px;
        }

        #fruits + div {
            margin-top: 20px;
        }

        #app > div > input[type=text] {
            width: 70%;
            height: 40px;
            color: #fff;
            border-radius: 8px;
            border: none;
            outline: none;
            font-size: 20px;
            text-align: center;
            vertical-align: middle;
            background-color: #999;
        }

        #ok {
            width: 19%;
            height: 40px;
            color: #fff;
            background-color: #a45;
            border: none;
            outline: none;
            font-size: 16px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div id="app">
    <ul id="fruits">
        <li v-for="x in fruits" @click="removeItem(x)">{{ x }}</li>
    </ul>
    <div>
        <input type="text" v-model="fruitName" @keydown.enter="addItem()">
        <button id="ok" @click="addItem()">确认</button>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            fruits: ['苹果', '香蕉', '葡萄'],
            fruitName:''
        },
        methods: {
            removeItem(x) {
                let index = this.fruits.indexOf(x)
                this.fruits.splice(index, 1)
            },
            addItem(){
                let fName = this.fruitName.trim()
                if (fName.length > 0){
                    this.fruits.push(fName)
                }
                this.fruitName = ''
            }
        }
    })
</script>
</body>
</html>